<template>
  <div class="dashboard-main">
    <el-row :gutter="30">
      <el-col :span="8" :offset="0">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div slot="header">
            <p style="margin:0">
              <svg-icon icon-class="user" class-name="custom-class" style="margin-right:10px" />用户总计：
              <span style="color:blue">{{baseData.userCount.count}}</span>
            </p>
          </div>
          <p style="margin:0;font-size:14px">
            今日新增用户：
            <span style="color:red">{{baseData.userCountToday.count}}</span>
          </p>
        </el-card>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div slot="header">
            <p style="margin:0">
              <svg-icon icon-class="table" class-name="custom-class" style="margin-right:10px" />图片总计：
              <span style="color:blue">{{baseData.imgCount.count}}</span>
            </p>
          </div>
          <p style="margin:0;font-size:14px">
            今日新增图片：
            <span style="color:red">{{baseData.imgCountToday.count}}</span>
          </p>
        </el-card>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-card shadow="hover" :body-style="{ padding: '20px' }">
          <div slot="header">
            <p style="margin:0">
              <svg-icon icon-class="form" class-name="custom-class" style="margin-right:10px" />新闻总计：
              <span style="color:blue">{{baseData.newsCount.count}}</span>
            </p>
          </div>
          <p style="margin:0;font-size:14px">
            今日新增新闻：
            <span style="color:red">{{baseData.newsCountToday.count}}</span>
          </p>
        </el-card>
      </el-col>
    </el-row>
    <div class="card echarts-container">
      <!-- 图标的容器 -->
      <div id="eCharts" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import baseDataApi from "@/api/dashboard";
import { getToken } from "@/utils/myAuth";
var echarts = require("echarts");
export default {
  name: "Dashboard",
  data() {
    return {
      baseData: {}
    };
  },
  created() {
    this.getBaseData();
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("eCharts"));
  },
  methods: {
    getBaseData() {
      var tokenStr = getToken("my-token");
      // console.log(tokenStr);
      baseDataApi
        .baseData({
          "bufan-token": tokenStr
        })
        .then(res => {
          console.log(res);
          this.baseData = res;
          this.initDashBoard();
        });
    },
    initDashBoard() {
      var xData = [];
      var yData = [];
      for (var i = 0; i < this.baseData.userCountByDay.length; i++) {
        var item = this.baseData.userCountByDay[i];
        xData.push(item.date);
        yData.push(item.count);
      }
      this.myChart.setOption({
        title: {
          text: "ECharts 入门示例"
        },
        tooltip: {},
        xAxis: {
          data: xData
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: yData
          }
        ]
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-main {
  .card {
    margin: 30px;
  }
  #echart1 {
    width: 600px;
    height: 300px;
    background-color: pink;
  }
}
</style>
